<style scoped>
    .pro-con {
        padding: 0 20px;
        margin-bottom: 50px;
    }

    .pro-con .ivu-form-item {
        margin-bottom: 0;
    }

    .pro-con .ivu-col {
        padding-right: 0 !important;

    }

    .fr {
        float: right;
    }

    .pro-pagesize .mr10 {
        margin-right: 10px;
    }

    .search-h3 {
        font-size: 18px;
        color: #ef8412;
        font-weight: normal;
        margin-bottom: 20px;
    }


    /*//////////////////////////////*/

    .search-h3 {
        font-size: 18px;
        color: #ef8412;
        font-weight: normal;
        margin-bottom: 20px;
    }

    .search-form {
        border-bottom: 1px solid #d9d9d9;
    }

    .search-form .ivu-col {
        margin-bottom: 15px;
    }

    .clear {
        clear: both;
    }

    .table-theme {
        clear: both;
    }

    .table-action {
        padding-top: 0;
        padding-bottom: 15px;
    }

    .pro-pagesize {
        margin-bottom: 10px;

    }

    .common-box-body.pr0 .ivu-form-item {
        padding-right: 0 !important;
    }
</style>
<template>
    <div class="pro-list">
        <product-title></product-title>
        <div class="pro-con">
            <div class="pro-con-f common-box-body">
                <h3 class="search-h3 huang">
                    快速搜索
                </h3>
                <Spin size="large" fix v-if="spinShow"></Spin>
                <Row class="">
                    <Form :model="searchForm">
                        <Col :xs="24" :sm="24" :md="24" :lg="4">
                        <Form-item label="日期">
                            <DatePicker type="month" transfer placeholder="请选择日期" v-model="searchForm.search_dateTime" @on-change="datachange($event,searchForm,'search_date')"></DatePicker>
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="4">
                        <Form-item label="工号">
                            <Input placeholder="请输入工号" v-model="searchForm.job_code"></Input>
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="4">
                        <Form-item label="营销员">
                            <Input placeholder="请输入工号" v-model="searchForm.name"></Input>
                        </Form-item>
                        </Col>
                        <Col :xs="24" :sm="24" :md="24" :lg="6">
                        <Form-item label="职级">
                            <Select v-model="searchForm.rank_id" transfer placeholder='请选择级别'>
                                <Option value="0">全部</Option>
                                <Option :value="item.id" v-for="item in rankList" :key="item.id">{{item.name}}</Option>
                            </Select>
                        </Form-item>
                        </Col>
                    </Form>
                    <Col :xs="24" :sm="24" :md="24" :lg="24" class="table-action">
                    <!-- <Button type="info" size="large" class="fr"  @click="zhiji" :disabled="btnDisabled">更新员工职级</Button>
                                    <div style="border-right: 1px solid #EDF2F6;padding-right: 15px;margin-right: 15px;" class="fr">
                                        <span class="clear"></span>
                                        <Button type="success" size="large" class="fr" @click="money" :disabled="btnDisabled">更新员工薪资</Button>
                                    </div>
                                     <div style="border-right: 1px solid #EDF2F6;padding-right: 15px;margin-right: 15px;" class="fr">
                                        <span class="clear"></span>
                                        <Button size="large"  class="fr" type="info" icon="ios-search" @click="get_data" :disabled="btnDisabled">搜索</Button>
                                    </div> -->
                    <div class="fr ">
                        <Button size="large" type="info" icon="ios-search" @click="search" :disabled="btnDisabled">搜索</Button>                
                        <Button type="primary" size="large" class=" mr10" icon="icon iconfont icon-daochu" @click="exportList">导出员工</Button>
                    </div>  
                    
                    </Col>
                    <div class="clear"></div>
                </Row>

            </div>
            <div class="table-theme highlight_table">
                <Table :loading="tableloading" ref="currentRowTable" @on-current-change="tableCurrentChange($event)" size="large" stripe
                    border :columns="header" :data="list"></Table>
            </div>
            <div id="footer">
                <Row class="pro-pagesize">
                    <Col :md="24" :lg="6">
                    <div class="fl ml20" v-if="btnDisabled">同步更新中{{ing}}/{{list.length}}条</div>&emsp;
                    <!-- <i-button type="primary" class="fl mr10 " :disabled="disabled" @click="toDetail">编辑</i-button> -->
                    <!-- <i-button type="error" class="fl mr10 " :disabled="disabled" @click="remove">删除</i-button> -->
                    </Col>
                    <Col :md="24" :lg="18" class="tRight">
                    <Page ref="pages" :total="classTotal" show-total show-sizer :current="p" show-elevator :page-size="pagesize" @on-change="pageChange"
                        @on-page-size-change="pageSizeChange" placement="top" class="page"></Page>
                    </Col>
                </Row>
            </div>
        </div>
    </div>
</template>

<script>
    import productTitle from '../../components/productTitle.vue'
    // import {get_cate_list,delCate,get_cate_one,cate_detail,update_cate,saveCate} from '../../api/compensate'
    import {
        getRankList
    } from '../../api/rank'
    import {
        dataUpdate,
        change_salary,
        check_emp,batchExportTwo
    } from '../../api/employee'
    export default {
        data() {
            return {
                spinShow:false,
                rankList: [],
                total: 0,
                header: [{
                        type: 'index',
                        title: '序号',
                        width: '60',
                        align: 'center'
                    },
                    {
                        key: 'name',
                        title: '名称',
                        align: 'center'
                    },
                    {
                        key: 'fyc',
                        title: 'FYC',
                        align: 'center'
                    },
                    {
                        key: 'duty_allowance',
                        title: '责任津贴',
                        align: 'center'
                    },
                    {
                        key: 'regular_allowance',
                        title: '推荐转正津贴',
                        align: 'center'
                    },
                    {
                        key: 'lifelong_allowance',
                        title: '终身推荐津贴',
                        align: 'center'
                    },
                    {
                        key: 'coach_allowance',
                        title: '辅导津贴',
                        align: 'center'
                    },
                    {
                        key: 'manage_allowance',
                        title: '管理津贴',
                        align: 'center'
                    },
                    {
                        // key:'zonghe',
                        title: '总和',
                        align: 'center',
                        render: (h, params) => {
                            return h('div', {

                                }, parseFloat(params.row.fyc) + parseFloat(params.row.duty_allowance) +
                                parseFloat(params.row.regular_allowance) + parseFloat(params.row.lifelong_allowance) +
                                parseFloat(params.row.coach_allowance) + parseFloat(params.row.manage_allowance)
                            )

                        }
                    },
                    {
                        key: 'surplus',
                        title: '结余',
                        align: 'center'
                    },
                    {
                        key: 'rank_name',
                        title: '职级',
                        align: 'center'
                    },
                    {
                        key: 'rec_name',
                        title: '推荐人',
                        align: 'center'
                    },
                    {
                        key: 'leader_name',
                        title: '关系人上级',
                        align: 'center'
                    },
                    {
                        key: 'join_time',
                        title: '入职日期',
                        align: 'center'
                    },
                    {
                        key: 'promotion_time',
                        title: '晋升日期',
                        align: 'center'
                    },

                ],
                ing: 0,
                disabled: true,
                tableloading: true,
                p: 1,
                pagesize: 10,
                list: [],
                current: {},
                classTotal: 0,
                //判断是否应该新增
                panduan: true,
                btnDisabled: false,
                searchForm: {
                    search_date: '',
                    search_dateTime: '',
                    p: 1,
                    pagesize: 10,
                    job_code: '',
                    rank_id: '',
                    name: "",
                },
                moneyIndex: 0,
                zhijiIndex: 0,
            }
        },
        components: {
            productTitle
        },
        created() {
            let date = new Date().toLocaleDateString().split('/');
            //对当前年月日进行判断  如果大于26，显示前一个月，反之显示当月，当 当前月份为1月时，显示为上一年12月
            if (date[2] < 26) {
                if (date[1] == 1) {
                    date[1] = 12;
                    date[0] = date[0] - 1;
                } else {
                    date[1] = date[1] - 1;
                }
            }
            date[1] = date[1] < 10 ? "0" + date[1] : date[1];
            this.searchForm.search_dateTime = date[0] + "-" + date[1];
            this.searchForm.search_date = date[0] + "-" + date[1];
            this.get_data();
            this.getRank();
        },
        activated() {

        },
        methods: {
            //获取职级列表
            getRank() {
                new Promise((resolve, reject) => {
                    getRankList().then(response => {
                        if (response.data.err == 0) {
                            this.rankList = response.data.data;
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            },
            tableCurrentChange(currentRow, oldCurrentRow) {
                this.disabled = false;
                this.current = currentRow;
            },
            datachange(date, obj, attr) {
                obj[attr] = date;
            },
            money() {
                var length = this.list.length;
                if (this.ing < length) {
                    this.tableloading = true;
                    this.btnDisabled = true;
                    // if(this.ing==4){
                    //     this.ing=6;
                    // }
                    let params = {
                        eid: this.list[this.ing].id,
                        search_date: this.searchForm.search_date
                    };
                    new Promise((rev, rej) => {
                        change_salary(params).then((res) => {
                            if (res.data.err == 0 || res.data.err == 1) {
                                // this.$Message.success(this.list[this.ing].name+""+res.data.info);
                                this.ing++;
                                let _this = this;
                                // setTimeout(function(){
                                _this.money();
                                // },500)
                            } else {
                                this.$Message.error(res.data.info);
                            }
                            rev();
                        }).catch(error => {
                            rej(error);
                        })
                    })
                } else {
                    this.get_data();
                    this.ing = 0;
                    this.btnDisabled = false;
                }
            },
            zhiji() {
                var length = this.list.length;
                if (this.ing < length) {
                    this.tableloading = true;
                    this.btnDisabled = true;
                    let params = {
                        eid: this.list[this.ing].id,
                    };
                    new Promise((rev, rej) => {
                        check_emp(params).then((res) => {
                            if (res.data.err == 0 || res.data.err == 1) {
                                // this.$Message.success(this.list[this.ing].name+""+res.data.info);
                                this.ing++;
                                let _this = this;
                                // setTimeout(function(){
                                _this.zhiji();
                                // },500);
                            } else {
                                this.$Message.error(res.data.info);
                            }
                            rev();
                        }).catch(error => {
                            rej(error);
                        })
                    })
                } else {
                    this.ing = 0;
                    this.get_data();
                    this.btnDisabled = false;
                }
            },
            get_data() {
                this.searchForm.p = this.p;
                this.searchForm.pagesize = this.pagesize;
                new Promise((rev, rej) => {
                    dataUpdate(this.searchForm).then(res => {
                        if (res.data.err == 0) {
                            this.list = res.data.data.data;
                            this.tableloading = false;
                            this.classTotal = res.data.data.total;
                            this.ing = 0;
                        } else {
                            this.$Message.error(res.data.info);
                            this.tableloading = false;
                        }
                        rev();
                    }).catch(error => {
                        rej(error);
                    })
                })
            },
            pageChange(val) {
                this.p = val;
                this.get_data();
            },
            pageSizeChange(val) {
                this.pagesize = val;
                this.get_data();
            },
            search() {
                this.p = 1;
                this.get_data();
            },
            exportList() {
                this.spinShow = true;
                new Promise((resolve, reject) => {
                    batchExportTwo(this.searchForm).then(response => {
                        if (response.data.err == 0) {
                            if(response.data.data.url){
                                this.spinShow = false;
                                var iframe = document.createElement('iframe');
                                iframe.style.display = 'none';
                                iframe.src = response.data.data.url;
                                document.body.appendChild(iframe);
                            }else{
                            //    this.exportOk(val+1);
                            //    this.$Spin.show({
                            //         render: (h) => {
                            //             return h('div', [
                            //                 h('Icon', {
                            //                     'class': 'demo-spin-icon-load',
                            //                     props: {
                            //                         type: 'load-c',
                            //                         size: 18
                            //                     }
                            //                 }),
                            //                 h('div', 'Loading')
                            //             ])
                            //         }
                            //     });
                            }

                        } else {
                            this.$Message.error(response.data.info)
                        }
                        
                        resolve();
                    }).catch(error => {
                        reject(error);
                    })
                })

                // var _exprot_arry = '';
                // if(this.exportForm.yun_org_mid.length > 0){
                //     _exprot_arry = this.exportForm.yun_org_mid.join("_")
                // }
                // console.log(_exprot_arry)
                // window.open('http://192.168.0.88:8080/batch_export/export_policy?settlement_date='+this.exportForm.settlement_date+'&&status='+this.exportForm.status+'&&start_date='+this.exportForm.start_date+'&end_date='+this.exportForm.end_date+'&yun_id='+this.get_yun_id+'&yun_org_mid='+_exprot_arry)

                //window.open('http://192.168.0.88:8080/batch_export/export_policy?start_date='+this.exportForm.start_date+'&end_date='+this.exportForm.end_date+'&yun_id='+this.get_yun_id+'&yun_org_mid='+_exprot_arry)
            },
        }

    }
</script>